<script setup lang="ts" name="GoodsSku">
import { GoodsInfo, SpecValue, Spec, Sku } from '@/types/goods';
import bwPowerSet from '@/utils/bwPowerSet';

const props = defineProps<{
  goods: GoodsInfo
}>()

// bwPowerSet([属性1, 属性2, 属性3,  属性4]) 属性列表 => 帮求子集 
// const arr = bwPowerSet(['红色', '180cm'])
// console.log(arr)

// 修改按钮的选中状态
const changeSelect = (item: Spec, val: SpecValue) => {
  // 如果按钮 已经被禁用了，则不需要有选中效果了
  if (val.disabled) return

  // 如果选中了，二次点击，取消选中
  // 如果没选中，当他选中，并且排他
  if (val.selected) {
    val.selected = false
  } else {
    item.values.forEach(v => v.selected = false)
    val.selected = true
  }
}

// 已进入页面控制启用禁用状态 => 需要 路径字典
// 基于数据 => skus，得到路径字典
const getPathMap = () => {
  const pathMap: any = {}
  // console.log(props.goods.skus)

  // 1. 过滤所有skus,  得到有效的skus (库存  inventory  > 0)
  const skus = props.goods.skus.filter(v => v.inventory > 0)
  // console.log(skus)

  // 2. 遍历有效的sku,  获取有效的Sku子集， 进行处理
  skus.forEach(sku => {
    // 3. 整理数据，整理得到[属性1, 属性2, 属性3]
    const arr = sku.specs.map(v => v.valueName)

    // 基于整理的属性列表，求子集
    const powerSet = bwPowerSet(arr)
    // console.log(powerSet)

    // 5. 遍历子集，将子集的数据往pathMap中整理
    //   （1）如果筛选条件 不存在， 新开一个属性存，
    //   （2）如果筛选条件 存在，  在已有的属性上，累加
    //  pathMap: { 键： [skuId1, skuId2, skuId3] }
    powerSet.forEach(sub => {
      // 将数组的信息，拼接成一个字符串，将来作为 键 skuId作为值 
      const key = sub.join('+')

      // 判断键 在对象中是否存在
      if (key in pathMap) {
        // 已存在, 在已有属性上累加
        pathMap[key].push(sku.id)
      } else {
        // 不存在， 直接新开一个属性，属性值，是一个有一项内容的数组
        // pathMap[key] = []
        // pathMap[key].push(sku.id) 
        pathMap[key] = [sku.id]
      }
    })
  })

  return pathMap
}
const pathMap = getPathMap()

// 更新启用禁用状态
const updateDisabledStatus = () => {
  props.goods.specs.forEach(spec => {
    // spec 表示sku的一列
    spec.values.forEach(specValue => {
      // specValue表示按钮
      if (specValue.name in pathMap) {
        // 存在，说明有库存，不禁用
        specValue.disabled = false
      } else {
        // 不存在，说明没有库存，禁用
        specValue.disabled = true
      }
    })
  })
}
updateDisabledStatus()
</script>

<template>
  <div class="goods-sku">
    <dl v-for="item in goods.specs" :key="item.name">
      <dt>{{ item.name }}</dt>
      <dd>
        <template v-for="val in item.values" :key="val.name">
          <img v-if="val.picture" :class="{ selected: val.selected, disabled: val.disabled }" :src="val.picture" alt=""
            @click="changeSelect(item, val)" />
          <span v-else :class="{ selected: val.selected, disabled: val.disabled }" @click="changeSelect(item, val)">{{
            val.name
          }}</span>
        </template>
      </dd>
    </dl>
  </div>
</template>

<style scoped lang="less">
.sku-state-mixin () {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;

  &.selected {
    border-color: @xtxColor;
  }

  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}

.goods-sku {
  padding-left: 10px;
  padding-top: 20px;

  dl {
    display: flex;
    padding-bottom: 20px;
    align-items: center;

    dt {
      width: 50px;
      color: #999;
    }

    dd {
      flex: 1;
      color: #666;

      >img {
        width: 50px;
        height: 50px;
        margin-top: 5px;
        .sku-state-mixin ();
      }

      >span {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        padding: 0 20px;
        margin-top: 5px;
        .sku-state-mixin ();
      }
    }
  }
}
</style>

